<template>
  <div>
    <HETTable1
      ref="baseLineTable"
      :tableData="data.tableData"
      :tHead="data.tHead"
      :headerOperation="
        !treeStore.isShowStrategyDetail
          ? isCustom
            ? data.customOperation
            : data.headerOperation
          : []
      "
      :total="data.total"
      :size="data.total"
      @getTableData="getBaseLineList"
    >
      <template #icon>
        <el-table-column slot="icon" :width="40">
          <template #default="scope">
            <div class="imgWarp">
              <img v-if="scope.row.check" title="放行" :src="img1" width="15" />
              <img title="拦截" v-if="!scope.row.check" :src="img2" width="15" />
            </div>
          </template>
        </el-table-column>
      </template>
      <template #valueStd>
        <el-table-column label="加固参数">
          <template #default="scope">
            <div v-if="scope.row.valueType == 0">
              <span
                v-if="scope.row.id == 10 || scope.row.id == 11 || scope.row.id == 12"
                >{{ scope.row.valueStd == 1 ? "开启" : "关闭" }}</span
              >
              <el-switch
                v-else
                v-model="scope.row.valueStd"
                :active-value="1"
                :inactive-value="0"
                :disabled="!isCustom"
              >
              </el-switch>
            </div>
            <el-input
              v-else
              v-model="scope.row.valueStd"
              :disabled="!isCustom"
            ></el-input>
            <span v-show="scope.row.valueType == 1">{{ scope.row.unit }}</span>
          </template>
        </el-table-column>
      </template>
    </HETTable1>
  </div>
</template>

<script setup>
import { ref, reactive, markRaw, onMounted } from "vue";
import { Delete, Plus } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useTreeStore } from "~/utils/pinia/tree.js";
import {
  req_getBaselineConfLinux,
  req_setBaselineConfLinux,
  req_reinforceBaselineLinux,
  req_resetBaselineLinux,
} from "~/utils/axios/index.js";
import { eventBus } from "~/utils/common/eventBus.js";
import img2 from "~/assets/images/noActivedeploy.png";
import img1 from "~/assets/images/deploy@2x.png";
const treeStore = useTreeStore();
const baseLineTable = ref();
treeStore.treeLinkedTableRef = baseLineTable;

eventBus.on("getStrategyDetail", (detail) => {
  treeStore.openTreeFlag = false;
  data.tableData = detail.data;
  data.total = detail.total;
});
const isCustom = ref(false);
// 一键加固
const reinforce = () => {
  req_reinforceBaselineLinux(treeStore.treeDeviceId).then((res) => {
    res.data.status ? ElMessage.success("操作成功") : ElMessage.error("操作失败");
    baseLineTable.value.getTableData();
  });
};
// 恢复原始
const restore = () => {
  req_resetBaselineLinux(treeStore.treeDeviceId).then((res) => {
    res.data.status ? ElMessage.success("操作成功") : ElMessage.error("操作失败");
    baseLineTable.value.getTableData();
  });
};
const confirm = () => {
  isCustom.value = false;
  let params = data.tableData.map((item) => {
    return {
      id: item.id,
      valueStd: item.valueStd,
    };
  });
  req_setBaselineConfLinux(treeStore.treeDeviceId, params).then((res) => {
    res.data.succeed ? ElMessage.success("操作成功") : ElMessage.error("操作失败");
    baseLineTable.value.getTableData();
  });
};
const cancel = () => {
  isCustom.value = false;
  baseLineTable.value.getTableData();
};
// 自定义
const custom = () => {
  isCustom.value = true;
};
const data = reactive({
  tHead: [
    {
      label: "icon",
      prop: "icon",
      isCustom: true,
      slotName: "icon",
    },
    {
      label: "加固项",
      prop: "desc",
      isCustom: false,
    },
    {
      label: "加固参数",
      prop: "valueStd",
      isCustom: true,
      slotName: "valueStd",
    },
  ],
  tableData: [],
  headerOperation: [
    {
      name: "一键加固",
      icon: "",
      inLeft: true,
      handleClick: reinforce,
    },
    {
      name: "恢复原始",
      icon: "",
      inLeft: true,
      handleClick: restore,
    },
    {
      name: "自定义",
      icon: "",
      inLeft: true,
      handleClick: custom,
    },
  ],
  customOperation: [
    {
      name: "确定",
      icon: "",
      type: "primary",
      inLeft: true,
      handleClick: confirm,
    },
    {
      name: "取消",
      icon: "",
      inLeft: true,
      handleClick: cancel,
    },
  ],
  total: null,
});

// 获取安全基线数据
const getBaseLineList = async (initTableParams, $filter) => {
  if (!treeStore.treeDeviceId) return;
  baseLineTable.value.loading();
  try {
    const { data: res } = await req_getBaselineConfLinux(treeStore.treeDeviceId, {
      page: 0,
      size: 13,
    });
    baseLineTable.value.finish();
    data.tableData = res.data || [];
    data.total = res.total || 0;
  } catch (err) {
    baseLineTable.value.finish();
  }
};
</script>

<style lang="scss" scoped>
:deep(.el-input) {
  width: 80px;
  margin-right: 10px;
}
</style>
